<script setup lang="ts">
import bg from 'src/assets/previous-works/p1.webp'
import PhotoCard from './PhotoCard.vue'
import type { PreviousWork } from '~/api'
import { getPreviousWorks } from '~/api'

const options = [
  { label: '热度', value: 'upvote_count' },
  { label: '时间', value: 'sw.update_time' },
  { label: '名称', value: 'works_name' }]
const router = useRouter()
const workName = ref('')
const loading = ref(true)
const activeSort = ref('upvote_count')
const orderType = ref(false)
const store = useTeamInfoStore()

const { basicInfo } = storeToRefs(store)
const AllShow = ref(false)
const { data: works, run: getList } = useRequest(getPreviousWorks, {
  manual: true,
})

const groupList = computed(() => {
  loading.value = false
  const arr = []
  if (!works.value)
    return {}
  return works.value.data.reduce<Record<string, PreviousWork[]>>((obj, d) => {
    arr.push(d)
    return arr
  }, {})
})
function orderTypeChange() {
  orderType.value = !orderType.value
  search()
}
function activeSortChange(val) {
  search()
}
function search() {
  loading.value = true
  getList({ scheduleId: basicInfo.value?.scheduleId, worksName: workName.value, orderVal: activeSort.value, orderType: orderType.value ? 'ASC' : 'DESC' })
}
function findText(val) {
  const index = options.findIndex(item => item.value === val)
  if (index !== -1)
    return options[index].label
}
function backPtah() {
  router.back()
}

getList({ scheduleId: basicInfo.value?.scheduleId, worksName: workName.value, orderVal: activeSort.value, orderType: orderType.value ? 'ASC' : 'DESC' })
</script>

<template>
  <PageItem :bg="bg" show-footer :content-style="{ flex: 1 }" style="justify-content: start;">
    <div h-full py="4vw">
      <!-- <n-button text type="primary">
        <span i="i-carbon-arrow-left" />
        返回
      </n-button> -->
      <!-- <n-button text type="primary" ghost @click="backPtah">
        <span class="i-carbon-arrow-left" m="r-2" />返回
      </n-button> -->
      <n-scrollbar trigger="none">
        <n-spin :show="loading">
          <div class="top-nav">
            <div>当届大赛作品</div>
            <n-popselect v-model:value="activeSort" :options="options" trigger="click" @change="activeSortChange">
              <div class="click-sort-item">
                {{ `排序方式：${findText(activeSort)}` }}&nbsp;
                <div class="i-carbon-caret-down" />
              </div>
            </n-popselect>

            <div class="nav-orderType" @click="orderTypeChange()">
              <div :class="orderType ? 'i-carbon-sort-ascending' : 'i-carbon-sort-descending'" />
            </div>
          </div>
          <div>
            <n-input-group>
              <n-input v-model:value="workName" :style="{ width: '100%', border: '1px solid rgba(186, 54, 210, 1)' }" />
              <n-button type="primary" ghost style="height:36px" @click="search">
                <span class="i-carbon:search" />
              </n-button>
            </n-input-group>
          </div>
        </n-spin>
      </n-scrollbar>
    </div>
    <div>
      <div grid="~ cols-4 justify-center gap-4vw lt-lg:(cols-1)" m="b-10">
        <template v-if="groupList.length">
          <PhotoCard v-for="(item, index) of groupList" v-show="!AllShow ? (index < 20) : true" :id="item.worksId" :key="index" :max-height="150" :title="item.worksName" :desc="item.content" :img-url="item.worksImgMainUrl" />
        </template>
      </div>
      <div m="t-2vw" text="center">
        <div v-if="groupList.length > 20 && !AllShow" btn @click="AllShow = !AllShow">
          查看更多
        </div>
      </div>
    </div>
  </PageItem>
</template>

<style scoped>
.top-nav{
  display: flex;
  align-items: center;
  color: var(--n-text-color);
  padding: 15px 0;
}
.top-nav .click-sort-item {
  margin-left: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.nav-orderType{
  display: flex;
  align-items: center;
  margin-left: 15px;
  cursor: pointer;
}
</style>
